<template>
  <div style="width: 60%; margin: 10px auto">
    <div class="donation-contenter">
      <div class="donation-item" v-for="item in list" :key="item.id">
        <el-image class="image" :src="item.cover">
          <template #error>
            <div class="image-slot">
              <el-icon><icon-picture /></el-icon>
            </div>
          </template>
        </el-image>
        <div class="right-content">
          <div class="title">
            {{ item.title }}
          </div>
          <div class="info">
            <div class="info-timer">
              <b>起止时间：</b>{{ item.startDate }} ~ {{ item.endDate }}
            </div>
            <div class="info-timer">
              <b>已筹金额：</b>{{ item.currentAmount }}
            </div>
            <div class="info-timer">
              <b>状态：</b>{{ statusFormatter(item.status) }}
            </div>
          </div>
          <div class="content">
            <el-progress :percentage="progress(item)" />
            <div class="progress">
              <el-button
                type="primary"
                round
                @click="showDetail(item.projectId)"
                >查看详情</el-button
              >
              <el-button
                type="info"
                round
                @click="openDonation(item.projectId)"
                :disabled="item.status !== 'active'"
                >立即捐款</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-pagination" v-if="data.total">
      <el-pagination
        @current-change="load"
        background
        layout="total, prev, pager, next"
        :page-size="queryParams.pageSize"
        v-model:current-page="queryParams.pageNum"
        :total="data.total"
      />
    </div>

    <el-dialog
      title="感谢有你！！"
      v-model="open"
      width="40%"
      destroy-on-close
      @close="closeDialog"
    >
      <div class="multiple">
        <div
          v-for="(item, index) in moneyList"
          class="multiple-item"
          :class="{ active: item.type === multipleActive }"
          @click="multipleActive = item.type"
        >
          {{ item.value }}元
        </div>
        <div
          class="multiple-item"
          :class="{ active: 'custom' === multipleActive }"
          @click="multipleActive = 'custom'"
        >
          <div v-if="'custom' === multipleActive">
            <el-input-number v-model="customMoney" :min="1"></el-input-number>
          </div>
          <div v-else>更多面额</div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="open = false">取 消</el-button>
          <el-button type="primary" @click="handleDonate">确 认</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      :title="title"
      v-model="detailVisiable"
      width="40%"
      destroy-on-close
    >
      <div v-html="content"></div>
    </el-dialog>
  </div>
</template>

<script setup>
import { onMounted, reactive, toRefs, ref, computed } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
import request from "@/utils/request.js";
const data = reactive({
  formVisible: false,
  form: {},
  list: [],
  total: 0,
  queryParams: {
    pageNum: 1,
    pageSize: 10,
  },
  user: JSON.parse(localStorage.getItem("xm-user") || "{}"),
});
const { queryParams, list, user } = toRefs(data);

const progress = (item) => {
  const percent = (item.currentAmount / item.targetAmount) * 100;
  if (percent >= 100) {
    return 100;
  } else {
    return percent.toFixed(2);
  }
};

// 翻译状态
const statusFormatter = (status) => {
  if (status == "active") {
    return "筹款中";
  } else if (status == "completed") {
    return "完成";
  } else if (status == "closed") {
    return "关闭";
  }
};

onMounted(() => {
  load();
});
const load = async () => {
  const respone = await request.get("/fundraising/selectPage", {
    params: queryParams.value,
  });
  list.value = respone.data.list;
  data.total = respone.data.total;
  console.log(list.value);
};

const open = ref(false);

const moneyList = ref([
  { type: "ten", value: 10 },
  { type: "twenty", value: 20 },
  { type: "thirty", value: 30 },
  { type: "forty", value: 40 },
  { type: "fifty", value: 50 },
]);

const multipleActive = ref("");
const customMoney = ref(0);

const closeDialog = () => {
  multipleActive.value = "";
  customMoney.value = 0;
};

const currentProjectId = ref("");
const openDonation = (id) => {
  open.value = true;
  currentProjectId.value = id;
};
const handleDonate = async () => {
  if (!multipleActive.value) {
    return;
  }
  let money = 0;
  if (multipleActive.value == "custom") {
    money = customMoney.value;
  } else {
    money = moneyList.value.find(
      (item) => item.type === multipleActive.value
    ).value;
  }
  const respone = await request.post("/donation/add", {
    projectId: currentProjectId.value,
    amount: money,
    userId: user.value.id,
  });
  if (respone.code == "200") {
    ElMessage.success("感谢您，为宠物救助所作出的捐赠！");
    load();
    open.value = false;
  } else {
    ElMessage.error(respone.msg ?? "捐赠失败");
  }
};

const title = ref("");
const content = ref("");
const detailVisiable = ref(false);

const showDetail = async (id) => {
  const respone = await request.get("/fundraising/" + id);
  title.value = respone.data.title;
  content.value = respone.data.description;
  detailVisiable.value = true;
  console.log(respone.data);
};
</script>

<style scoped>
.donation-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}
.donation-item .image {
  width: 150px;
  height: 150px;
  object-fit: cover;
  margin-right: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.right-content {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
  gap: 10px;
}

.title {
  font-size: 20px;
  font-weight: 800;
}

.info {
  display: flex;
  width: 100%;
  gap: 20px;
}

.progress {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-right: 16px;
}

.content {
  flex: 1;
  width: 100%;
  gap: 10px;
}

.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}

.my-pagination {
  display: flex;
  justify-content: center;
}

.multiple {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 10px;
  column-gap: 10px;
}

.multiple-item {
  height: 60px;
  background-color: #f7f7f7;
  text-align: center;
  line-height: 60px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px;
  color: black;
}

.active {
  background-color: #0fb266;
  color: #fff;
}
</style>
